<template>
	<view class="album-container">
		<view>
			<!-- 顶部导航栏 -->
			<view class="header">
				<view class="custom-nav" :style="{
					paddingTop: `${statusBarHeight}px`
				}">
					<view class="search-container" :style="{ height: `${searchBarHeight}px` }">
						<view class="back-icon" @tap="goBack">
							<image src="/static/img/arrow-right.png" mode="aspectFit" class="icon-image"></image>
						</view>
						<view class="search-box" @tap="toSearch">
							<image class="img" src="/static/img/search-icon2.png"></image>
							<view class="search-text">搜索</view>
						</view>
					</view>
				</view>

				<view v-if="tags.length > 0">
					<view :style="{ marginTop: `${statusBarHeight + searchBarHeight}px` }">
						<!-- 标签栏 -->
						<view class="tags-container" v-if="!isShared">
							<scroll-view class="tags-scroll" scroll-x :scroll-into-view="'tag-' + currentTagIndex"
								:style="{ paddingRight: '80rpx' }">
								<view class="tags">
									<view class="tag" v-for="(tag, index) in tags" :key="index" :id="'tag-' + index"
										:style="currentTagIndex === index ? 'background-color:' + t('color1') + ';' : 'background:#fff;'"
										:class="{ active: currentTagIndex === index }" @tap="switchTag(index)">
										<view>{{ tag.local }}</view>
										<view class="tag-number">{{ tag.name }}</view>
										<view class="triangle" v-if="currentTagIndex === index"
											:style="{ borderTopColor: t('color1') }">
										</view>
									</view>
								</view>
							</scroll-view>
							<view class="tags-more" @tap="goToSite">
								<image class="show-img" src="/static/img/show-list.png" mode=""></image>
								<!-- <text class="tags-more-text" >更多</text> -->
							</view>
						</view>
					</view>

					<!-- 相册信息 -->
					<view class="album-info">
						<view class="album-title">
							<view class="">
								<text class="number">【{{ currentAlbum.mark }}】</text>
								<text class="dot">·</text>
								<text class="name">{{ currentAlbum.title }}</text>
							</view>
							<view class="shop-box" :style="{ background: t('color2') }" @click="openShop"
								v-if="currentAlbum.productsCount > 0">
								<image class="lock-icon" :src="static_url + '/static/img/socialize/lock.png'" mode="">
								</image>
								<text class="shop-text">{{ currentAlbum.productsCount }}件商品</text>
							</view>
						</view>
						<view class="album-stats">
							<text>{{ currentAlbum.trip_date }}·{{ currentAlbum.trip_day }}天</text>
							<text>{{ currentAlbum.image_num }}张图片</text>
							<text>{{ currentAlbum.video_num }}个视频</text>
						</view>
						<view class="album-views">
							<text>{{ currentAlbum.person_views }}人浏览</text>
							<text>{{ currentAlbum.page_views }}次浏览</text>
							<text>{{ currentAlbum.download_num }}次下载</text>
						</view>
					</view>

					<!-- 分类标签 -->
					<view class="category-section">
						<scroll-view class="category-scroll" scroll-x :scroll-into-view="'category-' + currentCategory">
							<view class="category-icons">
								<view class="category-item" v-for="(item, index) in categoryList" :key="item.id"
									:id="'category-' + index" @click="switchCategoryTag(index)">
									<image :src="item.icon" mode="aspectFit"
										:class="['category-image', { active: currentCategory === index }]"
										:style="currentCategory === index ? 'border: 1px solid ' + t('color1') : ''">
									</image>
									<text :class="{ active: currentCategory === index }"
										:style="currentCategory === index ? 'color:' + t('color1') : ''">
										{{ item.name }}
									</text>
								</view>
							</view>
						</scroll-view>
						<view class="" style="height: 20rpx;background-color: #F2F2F2;">

						</view>
						<view class="scroll-container" v-if="subCategoryList.length > 0">
							<scroll-view class="sub-scroll" scroll-x :scroll-into-view="'sub-' + currentSubIndex"
								:style="{ paddingRight: '80rpx' }">
								<view class="sub-categories">
									<!-- 添加全部选项 -->
									<view class="sub-category" v-for="(sub, index) in subCategoryList" :key="sub.id"
										:id="'sub-' + index"
										:style="currentSubIndex === index ? 'background:' + t('color1') + '; color: #fff' : ''"
										@tap="switchSubCategory(index)">
										{{ sub.name }}{{ sub.count ? `(${sub.count})` : '' }}
									</view>
								</view>
							</scroll-view>
							<view class="sub-icon-right" v-if="subCategoryList.length > 0" @click="openPop">
								<image class="sub-icon"
									src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250327/2d794037b084dce02e1da51a99b85580.png"
									mode=""></image>
							</view>
						</view>

					</view>

					<view class="waterfall-wrapper">
						<view class="waterfall-column" v-for="(col, colIndex) in columns" :key="colIndex">
							<view v-for="(item, itemIndex) in col" :key="itemIndex" class="waterfall-item">
								<!-- 图片展示 -->
								<block v-if="item.type === 1">
									<image :src="item.url" mode="widthFix" class="waterfall-image"
										@click="previewImage(item)" />
								</block>


								<block v-else-if="item.type === 2">
									<view class="video-container" @click="openVideo(item)">
										<image :src="item.video_image" mode="widthFix" class="video-image" />
										<image src="/static/img/play.png" class="play-img" mode="widthFix"></image>
									</view>
								</block>

								<!-- 统计信息栏 -->
								<view class="image-stats">
									<view class="stat-item">
										<image
											src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250326/3ad4df2007dc00000839475fc69d6f22.png"
											mode="aspectFit" class="stat-icon" />
										<text class="stat-text">{{ item.page_views || 0 }}</text>
									</view>
									<view class="stat-item">
										<image
											src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250326/76c035ac77247846d1a817b1ce0b257a.png"
											mode="aspectFit" class="stat-icon" />
										<text class="stat-text">{{ item.download_num || 0 }}</text>
									</view>


								</view>
							</view>
						</view>

					</view>
					<view v-if="currentFileList.length === 0" class="empty-tip">

						<text>当前分类暂无内容</text>
					</view>

					<!-- 右下角按钮 -->
					<view class="float-buttons">
						<view class="float-btn" @tap="goto" data-url="/pages/shop/cart">
							<image class="img gwc-img"
								src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250312/06a38360f955195d68fd66142f6940e0.png" />

						</view>
						<view class="float-btn share" @click="openShare">
							<image src="/static/img/share.png" mode="aspectFit"></image>
						</view>
						<view class="float-btn top" v-if="showBackToTop" @tap="scrollToTop">
							<image
								src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250308/7c1cce16799e556a5b8bd4ff1ad0bb58.png"
								mode="aspectFit"></image>
						</view>
					</view>
				</view>

				<view v-else :style="{ marginTop: `${statusBarHeight + searchBarHeight}px` }">
					<nodata v-if="true"></nodata>
				</view>

				<!-- 图片预览遮罩层 -->
				<view class="preview-mask" v-if="showPreview" @tap="closePreview">
					<view class="preview-header">
						<text class="preview-count">{{ currentPreviewIndex + 1 }}/{{ currentImages.length }}</text>
						<text class="preview-close" @tap.stop="closePreview">✖</text>
					</view>
					<swiper class="preview-swiper" :current="currentPreviewIndex" @change="handleSwiperChange" circular>
						<swiper-item v-for="(item, index) in currentImages" :key="index">
							<image :src="item.url" mode="aspectFit" class="preview-image" @tap="closePreview"></image>
						</swiper-item>
					</swiper>
					<view class="preview-footer">
						<view class="preview-btn" @tap.stop="handleDownload">

							<text>下载图片</text>
						</view>
						<view class="preview-stats">
							<view class="preview-stat-item">
								<image
									src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250326/3ad4df2007dc00000839475fc69d6f22.png"
									mode="aspectFit" class="stat-icon" />
								<text class="preview-stat-text">{{ currentImageStats.views }}</text>
							</view>
							<view class="preview-stat-item">
								<image
									src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250326/76c035ac77247846d1a817b1ce0b257a.png"
									mode="aspectFit" class="stat-icon" />
								<text class="preview-stat-text">{{ currentImageStats.downloads }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 视频遮罩层 -->
				<view class="preview-mask" v-if="showVideo">
					<video class="preview-swiper" :src="showVideoData.url" :poster="showVideoData.video_image"
						controls></video>
					<view class="preview-footer">
						<view class="preview-btn" @tap.stop="DownloadVideo">
							<text>下载视频</text>
						</view>
						<view class="preview-btn" @tap="closeVideo">
							<text>退出播放</text>
						</view>
						<view class="preview-stats">
							<view class="preview-stat-item">
								<image
									src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250326/3ad4df2007dc00000839475fc69d6f22.png"
									mode="aspectFit" class="stat-icon" />
								<text class="preview-stat-text">{{ showVideoData.page_views }}</text>
							</view>
							<view class="preview-stat-item">
								<image
									src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250326/76c035ac77247846d1a817b1ce0b257a.png"
									mode="aspectFit" class="stat-icon" />
								<text class="preview-stat-text">{{ showVideoData.download_num }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="popupShow" class="popup__container">
				<view class="popup__overlay" @tap.stop="closePop"></view>
				<view class="popup__modal">
					<view class="service-item" v-for="(item, index) in serviceItems" :key="index"
						:style="activeIndex === index ? 'color:' + t('color2') : ''"
						:class="{ active: activeIndex === index }" @tap.stop="setActive(index)">
						{{ item.text }}
					</view>
					<view style="height: 20rpx;background: #F2F2F2;">

					</view>
					<view class="service-item" @click="closePop">
						取消
					</view>

				</view>
			</view>


			<view v-if="shopShow" class="popup__container">
				<view class="popup__overlay" @tap.stop="closeShop"></view>
				<view class="popup__modal shop__modal">
					<scroll-view class="popup-jl" scroll-y="true" style="flex:1;">
						<view class="shop-products">
							<view class="product-item" v-for="(item, index) in shopProducts" :key="index"
								@click="toShop(item)">
								<image class="product-image" :src="item.pic" mode="aspectFill"></image>
								<view class="product-info">
									<view class="product-title">{{ item.name }}</view>
									<!-- <view class="product-tags">
						<text class="product-tag" v-for="(tag, tagIndex) in item.tags"
							:key="tagIndex">{{tag}}</text>
					</view> -->
									<view class="sellpoint-text">
										{{ item.sellpoint }}
									</view>
									<view class="product-stats">
										<text class="product-sold">已售 {{ item.sales }}</text>
										<text class="product-rate">惊艳度 {{ item.amazing }}</text>
									</view>
									<view class="product-price-row">
										<view class="product-price">
											<text class="price-symbol">¥</text>
											<text class="price-value">{{ item.sell_price }}</text>
											<text class="price-original" v-if="item.market_price">¥{{ item.market_price
											}}</text>
										</view>
										<view class="add-btn" @tap.stop="addToCart(item)"
											:style="{ background: t('color1') }">
											<image src="/static/img/add.png"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="shop-footer">
						<button class="add-all-btn" @tap="addAllToCart"
							:style="{ background: t('color1') }">一键加入购物车</button>
					</view>
				</view>
			</view>
			<view v-if="sharetypevisible" class="popup__container">
				<view class="popup__overlay" @tap.stop="handleClickMask"></view>
				<view class="popup__modal" style="height:320rpx;min-height:320rpx">
					<image src="/static/img/close.png" class="popup__close" style="width:36rpx;height:36rpx"
						@tap.stop="hidePstimeDialog" />
					<view class="popup__content">
						<view class="sharetypecontent">

							<button class="f1" plain open-type="share" @click="share">
								<image class="img" src="/static/img/weixin.png" />
								<text class="t1">分享给好友</text>
							</button>
							<view class="f2" @tap="showPoster">
								<image class="img" :src="static_url + '/static/img/sharepic.png'" />
								<text class="t1">生成分享海报</text>
							</view>

							<view class="f1" @tap="copyLink">
								<image class="img" src="/pagesExt/static/images/link.png" />
								<text class="t1">复制链接</text>
							</view>

						</view>
					</view>
				</view>
			</view>
			<view class="posterDialog" v-if="showposter" @tap="closePoster">
				<view class="main">
					<view class="content">
						<image class="img" :src="posterpic" mode="widthFix" @tap="previewImage" :data-url="posterpic">
						</image>
					</view>
					<button class="download-btn" :style="{ backgroundColor: t('color1') }" @click.stop.prevent="save">
						<!-- 下载海报<text v-if="selectedImages.length > 0">({{ selectedImages.length }})</text> -->
						<image style="width: 30rpx;height: 30rpx;margin-right: 10rpx;margin-bottom: -5rpx;"
							src="/pagesExt/static/images/down.png" mode="aspectFit">
						</image>
						保存到相册
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			const defaultImage =
				'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg'
			return {
				defaultImage,
				statusBarHeight: 0, // 状态栏高度（系统决定）
				titleBarHeight: 44, // 导航栏标题高度（默认44px）
				searchBarHeight: 36, // 搜索框高度（根据设计稿调整）
				currentTagIndex: 0,
				currentCategory: 0,
				popupShow: false,
				sharetypevisible: false,
				shopShow: false,
				activeIndex: 0,
				currentSubIndex: 0,
				scrollHeight: "calc(100vh - 200rpx)",
				shopProducts: [],
				serviceItems: [{
						text: '最新上传',
						value: 'new'
					},
					{
						text: '最多下载',
						value: 'download',
					},
					{
						text: '最多浏览',
						value: 'view'
					}
				],
				categoryList: [],
				subCategoryList: [],
				currentCategoryIndex: 0,
				showBackToTop: false,
				showPreview: false,
				loading: false,
				currentPreviewIndex: 0,
				scrollLeft: 0,
				pre_url: app.globalData.pre_url,
				static_url: app.globalData.static_url,
				rawList: [], // 原始数据
				columns: [
					[],
					[]
				], // 两列数据
				currentFileList: [],
				tags: [],
				currentImages: [], // 当前可预览的图片数组
				previewItem: null, // 当前预览的图片对象
				showAllSubCategory: true,
				album_id: null,
				showposter: false,
				posterpic: '',
				share_title: '',
				share_path: '',
				share_imageUrl: '',
				isShared: false,
				shareAlbumId: null,
				videoContext: null,
				showVideo: false,
				showVideoData: {}
			}
		},
		computed: {
			currentAlbum() {
				if (!this.tags || this.tags.length === 0) {
					return {
						mark: '',
						title: '',
						name: '',
						trip_date: '',
						trip_day: '',
						image_num: 0,
						video_num: 0,
						person_views: 0,
						page_views: 0,
						download_num: 0,
						proids: '', // 保持字符串格式
						productsCount: 0 // 新增商品数量字段
					};
				}

				const current = this.tags[this.currentTagIndex];
				return {
					mark: current.mark,
					title: current.title,
					name: current.name,
					trip_date: current.trip_date,
					trip_day: current.trip_day,
					image_num: current.image_num,
					video_num: current.video_num,
					person_views: current.person_views,
					page_views: current.page_views,
					download_num: current.download_num,
					proids: current.proids || '', // 保持原始字符串
					productsCount: current.proids ? current.proids.split(',').filter(id => id.trim()).length : 0
				};
			},

			navBarHeight() {
				return this.statusBarHeight + this.titleBarHeight + this.searchBarHeight + 10
			},
			currentImageStats() {
				const image = this.currentImages[this.currentPreviewIndex] || {};
				return {
					views: image.page_views || 0,
					downloads: image.download_num || 0
				};
			}
		},
		onPageScroll(e) {
			this.showBackToTop = e.scrollTop > 200
		},
		onLoad(options) {
			// 检测是否从分享进入
			this.isShared = options.share_type === '1';

			// 获取分享的相册ID
			if (this.isShared && options.album_id) {
				this.shareAlbumId = options.album_id;
				console.log(options.album_id);
			}
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight || 0

			// 微信小程序需要计算胶囊按钮位置
			// #ifdef MP-WEIXIN
			const menuRect = wx.getMenuButtonBoundingClientRect()
			this.titleBarHeight = menuRect.bottom + menuRect.top - this.statusBarHeight
			// #endif
			this.distributeItems();
			this.getdata()

		},

		methods: {
			toSearch() {
				uni.navigateTo({
					url: './search'
				})
			},
			toShop(item) {
				uni.navigateTo({
					url: '/pages/shop/product?id=' + item.id
				})
			},
			openVideo(item) {
				this.showVideo = true;
				this.showVideoData = item;
				app.post('SocialSourceAlbum/imagePageviewsAdd', {
					album_id: item.album_id,
					category_id: item.category_id,
					sub_category_id: item.sub_category_id,
					file_id: item.file_id
				}, function(res) {

					if (res.status == 200) {


					} else {
						app.error(res.msg);
					}
				});
			},
			closeVideo() {
				this.showVideo = false;
			},
			getdata() {
				var that = this;

				app.get('SocialSourceAlbum/list', {

				}, function(res) {
					if (res.status == 200) {
						that.tags = res.data
						// 如果有分享的相册ID（从分享链接进入）
						if (that.isShared && that.shareAlbumId) {
							// 查找匹配的相册
							const sharedAlbum = res.data.find(item => item.id == that.shareAlbumId);
							if (sharedAlbum) {
								that.loadAlbumData(sharedAlbum);
							} else {
								app.error("分享的相册不存在");
								that.loadDefaultAlbum(res.data);
							}
						} else {
							// 正常情况加载第一个相册
							that.loadDefaultAlbum(res.data);
						}
					} else {
						app.error(res.msg)
					}
				});
			},
			// 加载相册数据的公共方法
			loadAlbumData(album) {
				this.album_id = album.id;
				this.getinfo(album.id);
				this.share_title = album.name;
				this.share_path = `/pagesSocial/album/album?share_type=1&album_id=${album.id}`;
				this.share_imageUrl = album.banner;
				// 更新当前选中的标签索引
				this.currentTagIndex = this.tags.findIndex(item => item.id === album.id);
			},

			// 加载默认第一个相册
			loadDefaultAlbum(albums) {
				if (albums.length > 0) {
					this.loadAlbumData(albums[0]);
				}
			},
			// 获取分类数据
			getinfo(id) {
				const that = this;
				that.loading = true;

				app.get('SocialSourceAlbum/albumInfo', {
					id: id
				}, function(res) {
					that.loading = false;
					if (res.status == 200) {
						// 处理分类数据，添加"全部"分类
						that.shopProducts = res.data.products;
						that.processCategoryData(res.data.category_list);
					} else {
						app.error(res.msg);
					}
				});
			},
			share() {
				let that = this;
				uni.share({
					title: that.share_title,
					path: `/pagesSocial/album/album?share_type=1&album_id=${that.album_id}`,
					imageUrl: that.share_imageUrl,
				});
			},
			onShareAppMessage() {
				return {
					title: this.share_title,
					path: `/pagesSocial/album/album?share_type=1&album_id=${this.album_id}`,
					imageUrl: this.share_imageUrl,
				};
			},
			copyLink: function() {
				var that = this;
				app.showLoading();
				app.post('SocialSourceAlbum/getwxScheme', {
					id: that.album_id
				}, function(data) {
					app.showLoading(false);
					if (data.status == 0) {
						app.alert(data.msg);
					} else {
						// that.showScheme = true;
						// that.schemeurl = data.openlink
						uni.setClipboardData({
							data: data.openlink,
							success: () => {
								uni.showToast({
									title: '链接已复制',
									icon: 'success',
									duration: 1000
								});
							}
						});
					}
				});
			},
			closePoster() {
				this.showposter = false
			},
			showPoster() {
				var that = this;
				app.showLoading('生成海报中');
				app.post('SocialSourceAlbum/getposter', {
					album_id: that.album_id,

				}, function(res) {
					app.showLoading(false);
					if (res.status == 1) {
						that.posterpic = res.poster
						that.showposter = true
					} else {
						app.error(res.msg)
					}
				});
			},
			//保存
			save() {
				const _this = this;
				if (!_this.posterpic) {
					uni.showToast({
						title: '请先生成海报',
						icon: 'none'
					});
					return;
				}

				// 检查平台并授权（微信小程序需单独处理）
				//#ifdef MP-WEIXIN
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success() {
						_this.downloadImg(_this.posterpic); // 下载并保存
					},
					fail() {
						uni.showToast({
							title: '保存失败：未授权',
							icon: 'none'
						});
					}
				});
				//#endif

				//#ifdef APP-PLUS || H5
				_this.downloadImg(_this.posterpic);
				//#endif
			},

			//下载并保存文件
			downloadImg(src) {
				uni.showLoading({
					title: '保存中...'
				});
				uni.downloadFile({
					url: src,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.hideLoading();
									uni.showToast({
										title: '已保存至相册',
										duration: 2000
									});
								},
								fail: () => {
									uni.hideLoading();
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									});
								}
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						});
					}
				});
			},
			// 设置选中项
			setActive(index) {
				this.activeIndex = index;
				const sortType = this.serviceItems[index].value;
				this.fetchSortedData(sortType);
				this.closePop();
			},
			formatFileSize(bytes) {
				if (!bytes) return '0B';
				if (bytes < 1024) return bytes + 'B';
				if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + 'KB';
				return (bytes / (1024 * 1024)).toFixed(1) + 'MB';
			},
			getCurrentImage() {
				return this.currentImages[this.currentPreviewIndex] || {};
			},
			// 根据排序类型获取数据
			fetchSortedData(sortType) {
				const that = this;
				that.loading = true;

				app.get('SocialSourceAlbum/albumInfo', {
					id: this.album_id, // 当前相册ID

					file_order: sortType, // 排序方式
					// sub_category_id: this.currentSubCategoryId // 当前子分类ID
				}, function(res) {
					that.loading = false;
					if (res.status == 200) {

						// 处理排序后的数据
						that.processCategoryData(res.data.category_list);

					} else {
						app.error(res.msg);
					}
				});
			},

			// 处理排序后的数据
			processSortedData(data, sortType) {
				// 更新当前分类下的文件列表
				if (this.currentCategory === 0) {
					// 全部分类处理
					this.updateAllCategoryFiles(data, sortType);
				} else {
					// 普通分类处理
					this.updateCurrentCategoryFiles(data, sortType);
				}

				// 重新计算瀑布流
				this.$nextTick(() => {
					this.calculateWaterfall();
				});
			},
			// 处理分类数据
			processCategoryData(rawCategories) {
				// 1. 添加"全部"分类
				this.categoryList = [{
						id: 0,
						name: "全部",
						icon: this.pre_url + "/static/img/socialize/all_icon.png",
						sub_category: this.getAllSubCategories(rawCategories)
					},
					...rawCategories.map(item => ({
						...item,
						// 确保每个分类都有sub_category字段
						sub_category: item.sub_category || []
					}))
				];

				// 2. 默认显示"全部"的子分类
				this.switchCategoryTag(0);
				if (this.subCategoryList.length > 0) {
					this.switchSubCategory(0);
				}
			},

			// 获取所有子分类
			getAllSubCategories(categories) {
				const allSubs = [];
				categories.forEach(cat => {
					if (cat.sub_category && cat.sub_category.length) {
						allSubs.push(...cat.sub_category.map(sub => ({
							...sub,
							parentName: cat.name // 添加父分类名便于区分
						})));
					}
				});
				return allSubs;
			},

			// 切换子分类（统一处理）
			switchSubCategory(index) {
				this.currentSubIndex = index;
				const subCategoryId = this.subCategoryList[index].id;
				this.loadSubCategoryContent(subCategoryId);
			},

			// 刷新瀑布流数据
			refreshWaterfallData() {
				// 强制清空以触发更新
				this.currentFileList = [];
				this.$nextTick(() => {
					this.currentFileList = this.getCurrentFileList();
					this.calculateWaterfall();
				});
			},
			// 初始化分类数据
			initCategoryData(rawData) {
				// 添加"全部"分类
				this.categoryList = [{
						id: 0,
						name: "全部",
						icon: "/static/all-category.png",
						// 特殊标记
						isAllCategory: true
					},
					...rawData
				];

				// 初始化子分类
				this.generateSubCategories();
			},

			// 生成子分类列表
			generateSubCategories() {
				if (this.currentCategory === 0) {
					// "全部"分类下的子分类
					this.subCategoryList = [{
							id: 0, // 特殊ID表示"全部子分类"
							name: "全部",
							count: this.calculateTotalFiles()
						},
						...this.getAllUniqueSubCategories()
					];
				} else {
					// 普通分类的子分类
					const mainCat = this.categoryList[this.currentCategory];
					this.subCategoryList = mainCat.sub_category?.map(sub => ({
						id: sub.id,
						name: sub.name,
						count: sub.file_list?.length || 0
					})) || [];
				}
			},
			// 获取所有不重复的子分类（用于全部分类）
			getAllUniqueSubCategories() {
				const subMap = new Map();

				this.categoryList.slice(1).forEach(mainCat => {
					mainCat.sub_category?.forEach(sub => {
						if (!subMap.has(sub.id)) {
							subMap.set(sub.id, {
								id: sub.id,
								name: sub.name,
								count: sub.file_list?.length || 0
							});
						}
					});
				});

				return Array.from(subMap.values());
			},
			// 计算总文件数
			calculateTotalFiles() {
				let total = 0;
				this.categoryList.slice(1).forEach(mainCat => {
					mainCat.sub_category?.forEach(sub => {
						total += sub.file_list?.length || 0;
					});
				});
				return total;
			},

			// 获取当前子分类的文件列表
			getCurrentSubFiles(subCategoryId) {
				// 查找当前主分类
				const mainCategory = this.categoryList[this.currentCategory];

				// 如果是"全部"分类
				if (this.currentCategory === 0) {
					const allFiles = [];
					this.categoryList.slice(1).forEach(cat => {
						if (cat.sub_category) {
							cat.sub_category.forEach(sub => {
								if (sub.file_list) {
									allFiles.push(...sub.file_list.map(file => ({
										...file,
										categoryName: cat.name,
										subCategoryName: sub.name
									})));
								}
							});
						}
					});
					return allFiles;
				}

				// 普通分类情况
				const subCategory = mainCategory.sub_category.find(
					sub => sub.id === subCategoryId
				);
				return subCategory?.file_list || [];
			},
			// 计算瀑布流布局
			calculateWaterfall() {
				this.columns = [
					[],
					[]
				]; // 重置为两列

				// 按图片高度排序（模拟瀑布流效果）
				const sortedFiles = [...this.currentFileList].sort((a, b) => {
					return (b.size || 0) - (a.size || 0); // 按文件大小排序，大图优先
				});

				// 分配图片到两列
				sortedFiles.forEach((file, index) => {
					const colIndex = index % 2; // 0或1
					this.columns[colIndex].push({
						id: file.id,
						image: file.url,
						likes: file.page_views, // 假设浏览量作为点赞数
						downloads: file.download_num,
						// 可以添加其他需要展示的字段
						category: file.categoryName,
						subCategory: file.subCategoryName
					});
				});
			},
			goBack() {
				if (this.isShared) {
					// 分享进入的页面，返回首页
					uni.reLaunch({
						url: '/pages/index/index' // 替换为你的首页路径
					});
				} else {
					// 正常返回上一页
					uni.navigateBack();
				}
			},
			addToCart(item) {
				console.log(item);
				app.post('Shop/addcart', {
					proid: item.id,
					ggid: item.guige.id,
					num: 1,
					glass_record_id: 0
				}, function(res) {
					if (res.status == 1) {
						app.success('添加成功');

					} else {
						app.error(res.msg);
					}
				});

			},
			addAllToCart() {
				if (!this.shopProducts || this.shopProducts.length === 0) {
					app.error('没有可添加的商品');
					return;
				}

				// 遍历所有商品并加入购物车
				this.shopProducts.forEach(item => {
					this.addToCart(item);
				});
				this.closeShop();
			},
			// 播放视频
			playVideo(item) {
				app.post('SocialSourceAlbum/imagePageviewsAdd', {
					album_id: item.album_id,
					category_id: item.category_id,
					sub_category_id: item.sub_category_id,
					file_id: item.file_id
				}, function(res) {

					if (res.status == 200) {


					} else {
						app.error(res.msg);
					}
				});
				// 获取当前视频元素并控制播放
				const video = this.$refs.videoElement;
				if (video) {
					// 如果视频当前未播放，播放视频；如果已播放，则暂停
					if (video.paused) {
						video.play();
					} else {
						video.pause();
					}
				};

				uni.previewMedia({
					sources: [{
						url: item.url,
						type: 'video',
						poster: item.video_image
					}],
					current: 0,
					success: (res) => {
						// 创建 videoContext 控制播放
						this.videoContext = uni.createVideoContext('previewVideo'); // 需要给 video 设置 id
					},
					onClose: () => {
						// 退出预览时停止播放
						if (this.videoContext) {
							this.videoContext.stop(); // 停止播放并回到开头
						}
					}
				});
			},
			// 停止视频播放
			stopVideo() {
				const video = this.$refs.videoElement;
				if (video) {
					video.pause(); // 暂停视频播放
					video.currentTime = 0; // 重置视频进度
				}
			},
			openShop() {
				this.shopShow = true
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});

			},
			closeShop() {
				this.shopShow = false

			},
			openShare() {
				this.sharetypevisible = true
			},
			hidePstimeDialog() {
				this.sharetypevisible = false
			},
			openPop() {
				this.popupShow = true
			},
			closePop() {
				this.popupShow = false
			},

			distributeItems() {
				this.columns = [
					[],
					[]
				]
				this.rawList.forEach((item, index) => {
					// 智能分配到当前高度较小的列
					const leftHeight = this.calculateColumnHeight(this.columns[0])
					const rightHeight = this.calculateColumnHeight(this.columns[1])
					const targetCol = leftHeight <= rightHeight ? 0 : 1
					this.columns[targetCol].push(item)
				})
			},
			calculateColumnHeight(column) {
				// 这里简化计算，实际项目中可以根据图片真实高度计算
				return column.length * 200 // 假设每张图片高度约200px
			},

			switchTag(index) {
				if (index === this.currentTagIndex) return;

				this.currentTagIndex = index;

				// 加载新标签的详情
				if (this.tags[index]) {
					const albumId = this.tags[index].id; // 获取当前相册 ID
					this.album_id = albumId; // 存储到 data 里
					this.share_title = this.tags[index].name
					this.share_path = '/pagesSocial/album/album?share_type=1'
					this.share_imageUrl = this.tags[index].banner
					this.getinfo(albumId); // 调用获取详情的方法
				}
				// this.currentCategoryIndex = 0 // 切换标签时重置分类索引

			},
			// 切换主分类
			switchCategoryTag(index) {
				this.currentCategory = index;
				const selectedCategory = this.categoryList[index];
				// 生成子分类列表，前面添加"全部"选项
				this.subCategoryList = [{
						id: 'all',
						name: '全部',
						count: selectedCategory.sub_category.reduce((total, sub) => {
							return total + (sub.file_list ? sub.file_list.length : 0)
						}, 0)
					},
					...selectedCategory.sub_category.map(sub => ({
						id: sub.id,
						name: sub.name,
						count: sub.file_list ? sub.file_list.length : 0
					}))
				];

				this.currentSubIndex = 0; // 默认选中"全部"

				// 加载内容
				this.loadSubCategoryContent('all');
			},
			// 加载子分类内容到瀑布流
			loadSubCategoryContent(subCategoryId) {
				const currentCategory = this.categoryList[this.currentCategory];

				if (subCategoryId === 'all') {
					// 加载当前大分类下的所有文件
					this.currentFileList = currentCategory.sub_category.flatMap(
						sub => sub.file_list || []
					);
				} else {
					// 加载指定子分类的文件
					const subCategory = currentCategory.sub_category.find(
						sub => sub.id === subCategoryId
					);
					this.currentFileList = subCategory?.file_list || [];
				}

				this.calculateWaterfall();
			},

			// 根据分类获取文件
			getFilesByCategory(mainCategoryId, subCategoryId) {
				// "全部"分类特殊处理
				if (mainCategoryId === 0) {
					const allFiles = [];
					this.categoryList.slice(1).forEach(cat => {
						if (cat.sub_category) {
							cat.sub_category.forEach(sub => {
								if (sub.file_list) {
									allFiles.push(...sub.file_list);
								}
							});
						}
					});
					return allFiles;
				}

				// 普通分类处理
				const mainCategory = this.categoryList.find(c => c.id === mainCategoryId);
				if (!mainCategory) return [];

				const subCategory = mainCategory.sub_category.find(s => s.id === subCategoryId);
				return subCategory?.file_list || [];
			},
			// 获取当前显示的文件列表
			getCurrentFileList() {
				// 当前选中的子分类
				const currentSub = this.subCategoryList[this.currentSubIndex];

				// 如果是"全部"分类
				if (this.currentCategory === 0) {
					// 如果是"全部"子分类
					if (currentSub.id === 0) {
						return this.getAllFiles();
					}
					// 如果是特定子分类
					return this.getFilesFromAllCategories(currentSub.id);
				}

				// 普通分类处理
				const mainCat = this.categoryList[this.currentCategory];
				const subCat = mainCat.sub_category.find(
					sub => sub.id === currentSub.id
				);
				return subCat?.file_list || [];
			},
			// 从所有分类中查找特定子分类的文件
			getFilesFromAllCategories(subCategoryId) {
				const result = [];
				// 遍历除"全部"外的所有分类
				this.categoryList.slice(1).forEach(mainCat => {
					// 查找匹配的子分类
					const subCat = mainCat.sub_category?.find(
						sub => sub.id === subCategoryId
					);
					if (subCat?.file_list) {
						result.push(...subCat.file_list.map(file => ({
							...file,
							// 添加分类信息便于调试
							_mainCategory: mainCat.name,
							_subCategory: subCat.name
						})));
					}
				});
				return result;
			},
			// 获取所有文件（全部分类用）
			getAllFiles() {
				const allFiles = [];
				this.categoryList.slice(1).forEach(mainCat => {
					mainCat.sub_category?.forEach(subCat => {
						subCat.file_list?.forEach(file => {
							allFiles.push({
								...file,
								_mainCategory: mainCat.name,
								_subCategory: subCat.name
							});
						});
					});
				});
				return allFiles;
			},

			switchCategory(index) {
				this.currentCategoryIndex = index
			},
			scrollToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
				this.showBackToTop = false
			},
			// 获取视频封面（如果有）
			getVideoPoster(item) {
				return item.video_image;
			},

			// 格式化视频时长
			formatDuration(seconds) {
				const mins = Math.floor(seconds / 60);
				const secs = Math.floor(seconds % 60);
				return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
			},

			// 预览图片
			previewImage(item) {
				this.currentImages = this.getAllImages();
				this.currentPreviewIndex = this.currentImages.findIndex(img => img.id === item.id);
				this.previewItem = item;
				this.showPreview = true;
				this.currentImageStats = {
					views: item.views || 0,
					downloads: item.downloads || 0
				};

				// 初始记录浏览量
				this.recordPageView(item);
			},

			// 滑动切换回调
			handleSwiperChange(e) {
				const newIndex = e.detail.current;
				this.currentPreviewIndex = newIndex;
				const currentItem = this.currentImages[newIndex];
				this.currentImageStats = {
					views: currentItem.views || 0,
					downloads: currentItem.downloads || 0
				};

				// 记录新图片的浏览量
				this.recordPageView(currentItem);
			},

			// 记录浏览量
			async recordPageView(item) {
				try {
					await app.post('SocialSourceAlbum/imagePageviewsAdd', {
						album_id: item.album_id,
						file_id: item.id
					});

					// 更新本地数据
					if (!item.views) item.views = 0;
					item.views += 1;
					this.currentImageStats.views = item.views;

				} catch (error) {
					console.error('记录浏览量失败', error);
				}
			},
			// 获取所有图片（用于预览）
			getAllImages() {
				const images = [];
				this.columns.forEach(col => {
					col.forEach(item => {
						if (item.type === 1) { // 只收集图片
							images.push(item);
						}
					});
				});
				return images;
			},
			// 关闭预览
			closePreview() {
				this.showPreview = false;
			},
			// 处理轮播图切换
			handleSwiperChange(e) {
				this.currentPreviewIndex = e.detail.current;
				this.previewItem = this.currentImages[this.currentPreviewIndex];
			},


			// 计算瀑布流数据时处理类型
			calculateWaterfall() {
				this.columns = [
					[],
					[]
				];
				const colHeights = [0, 0];

				// 处理文件数据
				const processedFiles = this.currentFileList.map(file => {
					// 估算高度（图片和视频不同）
					let aspectRatio = 1;
					if (file.type === 1) { // 图片
						aspectRatio = file.height && file.width ? file.height / file.width : 0.75;
					} else { // 视频
						aspectRatio = 0.6; // 视频通常更宽
					}

					return {
						...file,
						estimatedHeight: 300 * aspectRatio // 基础宽度300rpx
					};
				});

				// 按高度排序
				const sortedFiles = [...processedFiles].sort((a, b) => b.estimatedHeight - a.estimatedHeight);

				// 分配到列
				sortedFiles.forEach(file => {
					const targetCol = colHeights[0] <= colHeights[1] ? 0 : 1;
					this.columns[targetCol].push(file);
					colHeights[targetCol] += file.estimatedHeight;
				});
			},


			// 处理下载
			handleDownload() {
				const currentImage = this.currentImages[this.currentPreviewIndex];
				uni.downloadFile({
					url: currentImage.url,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: async () => {
									try {
										// 只需要传递 album_id 和 file_id
										await this.imageDownloadAdd({
											album_id: currentImage.album_id,
											file_id: currentImage.id
										});

										uni.showToast({
											title: '保存成功',
											icon: 'success'
										});
									} catch (error) {
										console.error('记录下载量失败:', error);
										uni.showToast({
											title: '保存成功，但记录下载量失败',
											icon: 'none'
										});
									}
								},
								fail: () => {
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									});
								}
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						});
					}
				});
			},

			// 增加下载量（简化版）
			async imageDownloadAdd(params) {
				try {
					const response = await app.post('SocialSourceAlbum/imageDownloadAdd', {
						album_id: params.album_id,
						file_id: params.file_id
					});

					console.log('下载量增加成功', response);
					return response;
				} catch (error) {
					console.error('增加下载量失败', error);
					throw error;
				}
			},
			// 视频下载方法
			DownloadVideo() {
				const videoUrl = this.showVideoData.url;
				const videoId = this.showVideoData.id; // 确保数据结构中有视频ID
				const albumId = this.showVideoData.album_id; // 确保数据结构中有相册ID

				// 显示加载提示
				uni.showLoading({
					title: '下载中...',
					mask: true
				});

				// 步骤1：下载视频文件
				uni.downloadFile({
					url: videoUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							// 步骤2：保存到相册
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath,
								success: async () => {
									// 步骤3：调用接口增加下载量
									try {
										await this.videoDownloadAdd({
											album_id: albumId,
											file_id: videoId
										});
										uni.hideLoading();
										uni.showToast({
											title: '下载成功',
											icon: 'success'
										});
										// 更新本地数据（可选）
										this.showVideoData.download_num += 1;
									} catch (error) {
										uni.hideLoading();
										uni.showToast({
											title: '下载成功，但统计失败',
											icon: 'none'
										});
									}
								},
								fail: () => {
									uni.hideLoading();
									uni.showToast({
										title: '保存到相册失败',
										icon: 'none'
									});
								}
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '视频下载失败',
							icon: 'none'
						});
					}
				});
			},

			// 增加视频下载量API调用
			async videoDownloadAdd(params) {
				try {
					const response = await app.post('SocialSourceAlbum/imageDownloadAdd', {
						album_id: params.album_id,
						file_id: params.file_id
					});
					return response;
				} catch (error) {
					console.error('视频下载量统计失败:', error);
					throw error;
				}
			},
			// 处理分享
			handleShare() {
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				})
			},
			goToSite() {
				uni.navigateTo({
					url: '/pagesSocial/album/site'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.album-container {
		min-height: 100vh;
		background-color: #fff;
	}

	.custom-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		background: #fff;
		z-index: 99;
	}

	.title-bar {
		display: flex;
		align-items: center;
		padding: 0 15px;
	}

	.search-container {

		display: flex;
		align-items: center;
		width: 65%;

		.icon-image {
			width: 60rpx;
			height: 60rpx;

		}
	}

	.search-box {
		flex: 1;
		height: 100%;
		background: #f5f5f5;
		border-radius: 18px;
		display: flex;
		align-items: center;
		padding: 0 15px;
	}

	.search-box .img {
		width: 16px;
		height: 16px;
		margin-right: 8px;
	}

	.search-text {
		color: #999;
		font-size: 14px;
	}

	.header {
		background-color: #fff;


		.search-bar {
			display: flex;
			align-items: center;
			padding: 10rpx 0;

			.back-icon {
				padding: 0 20rpx;

				.icon-image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.search-input {
				flex: 1;
				display: flex;
				align-items: center;
				background-color: #f5f5f5;
				border-radius: 30rpx;
				padding: 10rpx 20rpx;
				margin: 0 20rpx;

				.icon-image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}

			.right-icons {
				display: flex;
				gap: 20rpx;

				.icon-image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}

	.tags-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.tags-more {
		padding: 20rpx;
		position: absolute;
		top: 20rpx;
		right: 0;
		background-color: #FBFEFD;
		box-shadow: -4rpx 0 8rpx rgba(0, 0, 0, 0.1);
	}



	.tags-scroll {
		white-space: nowrap;
		width: 100%;
		padding: 0 20rpx;

		::-webkit-scrollbar {
			display: none;
		}

		.tags {
			display: inline-flex;
			padding: 20rpx 0;

			.tag {

				background-color: #fff;
				padding: 10rpx 20rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
				border: 1px solid #eee;
				text-align: center;
				position: relative;

				&.active {
					background-color: #07c160;
					color: #fff;
				}

				.tag-number {
					font-size: 24rpx;
					text-align: center;
				}
			}

			.triangle {
				position: absolute;
				bottom: -12rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 0;
				height: 0;
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-top: 6px solid;
				/* 颜色通过style绑定 */
			}

			// .tag.active::after {
			//   content: "";
			//   position: absolute;
			//   bottom: -12rpx; 
			//   left: 50%;
			//   transform: translateX(-50%);
			//   width: 0;
			//   height: 0;
			//   border-left: 6px solid transparent;
			//   border-right: 6px solid transparent;
			//   border-top: 6px solid #07c160; 
			// }

		}
	}



	.album-info {
		padding: 30rpx 20rpx;
		background-color: #fff;

		.album-title {
			font-size: 36rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;

			.dot {
				margin: 0 10rpx;
			}

			.shop-box {
				display: flex;
				align-items: center;
				border-radius: 36rpx;
				padding: 10rpx;

				.lock-icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 4rpx;
				}

				.shop-text {
					font-size: 24rpx;
					color: #fff;
				}
			}
		}

		.album-stats {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 10rpx;
		}

		.album-views {
			font-size: 24rpx;
			color: #666;


		}

		.album-stats text:not(:last-child)::after,
		.album-views text:not(:last-child)::after {
			content: "|";
			margin: 0 8px;
			color: #ccc;
		}
	}

	.category-scroll {
		padding: 20rpx;

		::-webkit-scrollbar {
			display: none;
		}
	}

	.category-section {
		background-color: #fff;

		.category-icons {
			display: flex;


			.category-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 30rpx;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					margin-bottom: 10rpx;
				}

				text {
					font-size: 24rpx;
				}
			}
		}

		.sub-categories {
			display: flex;
			align-items: center;
			white-space: nowrap;
			position: relative;

			.sub-category {
				padding: 8rpx 20rpx;
				margin-right: 20rpx;
				border-radius: 30rpx;
				background-color: #f5f5f5;
				font-size: 24rpx;

				&.active {
					background-color: #07c160;
					color: #fff;
				}
			}
		}
	}

	.image-grid {
		padding: 20rpx;
		column-count: 2;
		column-gap: 20rpx;

		.image-item {
			break-inside: avoid;
			margin-bottom: 20rpx;
			position: relative;
			border-radius: 12rpx;
			overflow: hidden;
			background-color: #fff;

			image {
				width: 100%;
				display: block;
				border-radius: 12rpx;
			}

			.image-stats {
				position: absolute;
				bottom: 16rpx;
				right: 16rpx;
				display: flex;
				gap: 16rpx;

				.stat {
					display: flex;
					align-items: center;
					background: rgba(0, 0, 0, 0.4);
					padding: 4rpx 12rpx;
					border-radius: 20rpx;

					.icon-image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 6rpx;
					}

					text {
						color: #fff;
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.float-buttons {
		position: fixed;
		right: 30rpx;
		bottom: 120rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		z-index: 98;

		.float-btn {
			width: 80rpx;
			height: 80rpx;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

			image {
				width: 40rpx;
				height: 40rpx;
			}

			&.share {


				image {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}
	}

	.icon-image {
		width: 32rpx;
		height: 32rpx;
	}

	.preview-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		z-index: 999;
		display: flex;
		flex-direction: column;
	}

	.preview-header {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;

		.preview-count {
			background: rgba(0, 0, 0, 0.5);
			padding: 4rpx 20rpx;
			border-radius: 30rpx;
		}

		.preview-close {
			position: absolute;
			right: 0;
			margin: 40rpx;
		}
	}

	.preview-swiper {
		flex: 1;
		width: 100%;

		.preview-image {
			width: 100%;
			height: 100%;
		}
	}

	/* 预览统计信息样式 */
	.preview-stats {
		display: flex;
		align-items: center;
	}

	.preview-stat-item {
		display: flex;
		align-items: center;
		margin-left: 40rpx;
		color: #fff;
	}

	.preview-stat-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}

	.preview-stat-text {
		font-size: 28rpx;
	}

	.preview-footer {
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;

		.preview-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #fff;
			background: #363636;
			padding: 10rpx 20rpx;
			border-radius: 36rpx;

			text {
				font-size: 24rpx;
			}
		}
	}

	.waterfall-wrapper {
		display: flex;
		padding: 20rpx 0;
		box-sizing: border-box;
	}


	.waterfall-column {
		flex: 1;
	}


	.waterfall-column:first-child {
		margin-right: 10rpx;
	}

	.waterfall-column:last-child {
		margin-left: 0;
	}

	.waterfall-item {
		margin-bottom: 10rpx;
		background: #fff;

		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		position: relative;
	}

	.waterfall-item image {
		width: 100%;
		display: block;
	}



	.image-stats {
		position: absolute;
		bottom: 0;
		left: 20rpx;
		right: 0;
		display: flex;

		padding: 16rpx 0;
		gap: 30rpx;

	}

	.stat-item {
		display: flex;
		align-items: center;

	}

	.stat-icon {
		width: 32rpx !important;
		height: 32rpx;
		margin-right: 8rpx;

	}

	.stat-text {
		color: #fff;
		font-size: 24rpx;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5);
	}

	.sub-icon-right {
		position: absolute;
		right: 0;
		top: 20rpx;
		bottom: 0;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		z-index: 2;
		border-left: 1px solid #ccc;
	}

	.sub-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.scroll-container {
		position: relative;
		width: 100%;
		padding: 20rpx 20rpx 0 20rpx;
	}

	.sub-scroll {
		width: 100%;
		white-space: nowrap;

		::-webkit-scrollbar {
			display: none;
		}
	}

	.popup__container {
		z-index: 99;
	}

	.popup__overlay {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		z-index: 11;
		opacity: 0.3;
		background: #000
	}

	.popup__modal {
		min-height: 400rpx;
	}

	.shop__modal {
		min-height: 800rpx;
	}

	.pop-btn {
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		border-radius: 40rpx;
		z-index: 1000;
	}

	.service-item {
		padding: 30rpx 0;
		text-align: center;
		border-bottom: 1px solid #eee;
	}

	.service-item:last-child {
		border: none;
	}

	.shop-modal {
		display: flex;
		flex-direction: column;
		max-height: 60vh;
		padding: 0;
		border-radius: 20rpx 20rpx 0 0;
	}

	.shop-content {
		display: flex;
		flex-direction: column;

		width: 100%;
		position: relative;
	}

	.shop-title {
		padding: 30rpx 30rpx 20rpx;
		font-size: 32rpx;
		font-weight: bold;
		border-bottom: 1px solid #f2f2f2;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shop-count {
		font-size: 24rpx;
		color: #666;
		font-weight: normal;
	}

	.shop-products-scroll {
		flex: 1;
		height: calc(80vh - 200rpx);
	}

	.shop-products {
		padding: 0 20rpx;
		padding-bottom: 100rpx;
	}

	.popup__modal {
		display: flex;
		flex-direction: column;
		height: 80vh;
		/* 弹窗总高度 */
		max-height: 100%;
		/* 防止超出屏幕 */
	}

	.popup-jl {
		flex: 1;
		/* 自动填充剩余空间 */
		overflow-y: auto;
		/* 允许滚动 */
		-webkit-overflow-scrolling: touch;
		/* iOS 平滑滚动 */
	}

	.shop-footer {
		flex-shrink: 0;
		/* 防止按钮被压缩 */
		padding: 20rpx;
	}

	.product-item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1px solid #f2f2f2;
	}

	.product-image {
		width: 250rpx;
		height: 250rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.product-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.product-title {
		font-size: 28rpx;
		line-height: 1.4;

		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.sellpoint-text {
		font-size: 22rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		color: #E2771F;
	}

	.product-tags {
		display: flex;
		flex-wrap: wrap;

	}

	.product-tag {
		font-size: 22rpx;
		color: #ff6b00;
		background-color: rgba(255, 107, 0, 0.1);
		padding: 2rpx 10rpx;
		border-radius: 4rpx;
		margin-right: 10rpx;
		margin-bottom: 6rpx;
	}

	.product-stats {
		font-size: 22rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.product-stats text:not(:last-child) {
		margin-right: 20rpx;
	}

	.product-price-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-price {
		display: flex;
		align-items: baseline;
	}

	.price-symbol {
		font-size: 24rpx;
		color: #ff6b00;
	}

	.price-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #ff6b00;
	}

	.price-original {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
		margin-left: 10rpx;
	}

	.add-btn {
		width: 50rpx;
		height: 50rpx;
		background-color: #ff6b00;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add-btn image {
		width: 30rpx;
		height: 30rpx;
	}

	.shop-footer {
		padding: 20rpx;
		border-top: 1px solid #f2f2f2;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
	}

	.add-all-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		background-color: #ff6b00;
		border-radius: 40rpx;
		border: none;
	}

	.empty-tip {
		padding: 100rpx 0;
		text-align: center;
		color: #999;
	}

	.empty-tip image {
		width: 200rpx;
		height: 200rpx;
		opacity: 0.6;
	}

	/* 视频容器 */
	.video-container {
	  position: relative;
	  width: 100%;
	  height: 0;          
	  padding-bottom: 56.25%; 
	  overflow: hidden;
	}

	.video-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.play-img {
		width: 40rpx !important;
		height: 40rpx !important;
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.uni-video-video {
		object-fit: cover !important;
	}

	.waterfall-video {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		object-fit: cover !important;
		display: block;

	}

	.play-icon {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	}

	.video-duration {
		position: absolute;
		right: 8rpx;
		bottom: 8rpx;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 20rpx;
		padding: 4rpx 8rpx;
		border-radius: 4rpx;
		z-index: 2;
	}

	.posterDialog {
		background: rgba(0, 0, 0, 0.4);
		z-index: 115;

	}

	.posterDialog .main {
		margin-top: 80rpx;
		background: unset;
	}

	.download-btn {
		background-color: #00b578;
		color: #fff;
		border-radius: 40rpx;
		font-size: 32rpx;
		margin: 30rpx auto;
		width: 80%;

		&:disabled {
			background-color: #ccc;
		}
	}

	.show-img {
		width: 40rpx;
		height: 40rpx;
		margin-top: 6rpx;
	}
</style>